<template>
    <div class="battery-container">
        <div class="battery">
            <!-- 电池主体 -->
            <div class="battery-body">
                <!-- 电池填充部分 -->
                <div class="battery-fill" :style="fillStyle" :class="batteryLevelClass"></div>
                <!-- 闪电图标（始终居中显示） -->
                <image v-if="showLightning" class="lightning-icon" src="/static/icon/sd.png" alt="lightning" />
            </div>
            <!-- 电池正极（固定尺寸） -->
            <div class="battery-head"></div>
        </div>
        <!-- 电量百分比显示 -->
        <div class="battery-percent" v-if="showPercent">{{ percent }}%</div>
        <div class="battery-percent" v-if="showTip">{{ tip }}</div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    // 电量百分比（0-100）
    percent: {
        type: Number,
        default: 50,
        validator: value => value >= 0 && value <= 100
    },
    // 是否显示百分比数字
    showPercent: {
        type: Boolean,
        default: true
    },
    // 是否显示闪电图标
    showLightning: {
        type: Boolean,
        default: true
    },
    // 自定义颜色（覆盖自动颜色）
    color: {
        type: String,
        default: '#55946d'
    },
    showTip: {
        type: Boolean,
        default: false
    },
    tip: {
        type: String,
        default: ''
    },
});

// 计算电量等级类名
const batteryLevelClass = computed(() => {
    if (props.percent <= 20) return 'low-power';
    if (props.percent <= 60) return 'medium-power';
    return 'high-power';
});

// 计算填充样式
const fillStyle = computed(() => ({
    height: `${props.percent}%`,
    backgroundColor: props.color || getAutoColor(props.percent)
}));

// 根据电量自动获取颜色
function getAutoColor(percent) {
    if (percent <= 20) return '#ff4d4f'; // 红色低电量
    if (percent <= 60) return '#faad14'; // 黄色中等电量
    return '#55946d'; // 绿色高电量
}
</script>

<style scoped>
/* 固定尺寸容器 */
.battery-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    /* 固定字体大小 */
}

/* 固定尺寸电池 */
.battery {
    position: relative;
    width: 25px;
    /* 固定宽度 */
    height: 33px;
    /* 固定高度 (30 * 1.8) */
    box-sizing: border-box;
}

.battery-body {
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid #55946d;
    /* 固定边框 */
    border-radius: 4px;
    /* 固定圆角 */
    overflow: hidden;
    background-color: #f5f5f5;
    box-sizing: border-box;
    padding: 2px;
    /* 固定内边距 */
}

.battery-fill {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 2px;
    /* 固定圆角 */
    transition: height 0.5s ease, background-color 0.5s ease;
}

/* 固定尺寸电池头 */
.battery-head {
    position: absolute;
    top: -3px;
    /* 固定位置 */
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    /* 固定宽度 (30 * 0.4) */
    height: 4px;
    /* 固定高度 (30 * 0.2) */
    background-color: #55946d;
    border-radius: 2px 2px 0 0;
    /* 固定圆角 */
}

/* 闪电图标样式 */
.lightning-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    /* 固定图标大小 */
    height: 26px;
    z-index: 2;
    /* 确保在填充层之上 */
    opacity: 0.8;
    /* 半透明效果 */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
    /* 添加阴影 */
}

.battery-percent {
    margin-top: 4px;
    font-weight: bold;
    color: #666;
}

/* 电量状态类 */
.low-power {
    opacity: 0.9;
    animation: pulse 1.5s infinite;
}

.medium-power {
    opacity: 0.95;
}

.high-power {
    opacity: 1;
}

@keyframes pulse {
    0% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 0.9;
    }
}
</style>